<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>数据填报</el-breadcrumb-item>
      <el-breadcrumb-item>表格操作</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>

      <!-- 基础清单表 -->
      <div v-if="arr.indexOf('baseInventory') > -1">
        <div class="excel">
          <span class="title">基础清单表</span>
          <el-row>
          <el-col :span="10">
          <el-upload ref="uploadBaseInventory" accept=".xls, .xlsx" action :limit="1" :auto-upload="false" 
            :on-change="BaseInventoryChange" :on-exceed="OnExceed" :on-remove="BaseInventoryRemove" :file-list="fileListBase">
            <template #trigger><el-button size="small" type="primary">选择表格</el-button></template>
            <el-button style="margin-left:10px" size="small" type="info" @click="checkBaseInventory">检查表格</el-button>
            <el-button style="margin-left:10px" size="small" type="success" @click="uploadBaseInventory">确认上传</el-button>
            <template #tip><div class="el-upload__tip">只能上传xls,xlsx格式的excel文件</div></template>
          </el-upload>
          </el-col>
          <el-col :span="7" style="text-align:center">
            <el-button size="small" type="warning" @click="DownloadBaseInventoryExcel">下载表格</el-button>
          </el-col>
          <el-col :span="7" style="text-align:center">
            <el-button size="small" type="danger" @click="DownloadBaseInventoryModel">下载模板</el-button>
          </el-col>
          </el-row>
        </div>
        <!-- 在线查看、编辑excel -->
        <div class="excelData" style="margin-bottom:12px;" v-show="this.excelTableBase">
          <el-table :data="excelDataBase" border stripe style="height:300px;width:100%" max-height="300px">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="项目编号" label="项目编号"></el-table-column>
            <el-table-column prop="项目名称" label="项目名称" min-width="150px"></el-table-column>
            <el-table-column prop="项目简称" label="项目简称"></el-table-column>
            <el-table-column prop="项目特征描述" label="项目特征描述"></el-table-column>
            <el-table-column label="等等"></el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 进度表 -->
      <div v-if="arr.indexOf('process') > -1">
        <div class="excel">
          <span class="title">进度表</span>
          <el-row>
          <el-col :span="10">
          <el-upload ref="uploadProcess" accept=".xls, .xlsx" action :limit="1" :auto-upload="false"
            :on-change="ProcessChange" :on-exceed="OnExceed" :on-remove="ProcessRemove" :file-list="fileListPro">
            <template #trigger><el-button size="small" type="primary">选择表格</el-button></template>
            <el-button style="margin-left:10px" size="small" type="info" @click="checkProcess">检查表格</el-button>
            <el-button style="margin-left:10px" size="small" type="success" @click="uploadProcess">确认上传</el-button>
            <template #tip><div class="el-upload__tip">只能上传xls,xlsx格式的excel文件</div></template>
          </el-upload>
          </el-col>
          <el-col :span="7" style="text-align:center">
            <el-button size="small" type="warning" @click="DownloadProcessExcel">下载表格</el-button>
          </el-col>
          <el-col :span="7" style="text-align:center">
            <el-button size="small" type="danger" @click="DownloadProcessModel">下载模板</el-button>
          </el-col>
          </el-row>
        </div>
        <!-- 在线查看、编辑excel -->
        <div class="excelData" style="margin-bottom:12px;" v-show="this.excelTablePro">
          <el-table :data="excelDataPro" border stripe style="height:300px;width:100%" max-height="300px">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="起桩号" label="起桩号"></el-table-column>
            <el-table-column prop="止桩号" label="止桩号" min-width="150px"></el-table-column>
            <el-table-column prop="本次完成工程量" label="本次完成工程量"></el-table-column>
            <el-table-column prop="本次完成金额" label="本次完成金额"></el-table-column>
            <el-table-column label="等等"></el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 试验检测表 -->
      <div v-if="arr.indexOf('experiment') > -1">
        <div class="excel">
          <span class="title">试验检测表</span>
          <el-row>
          <el-col :span="10">
          <el-upload ref="uploadExperiment" accept=".xls, .xlsx" action :limit="1" :auto-upload="false"
            :on-change="ExperimentChange" :on-exceed="OnExceed" :on-remove="ExperimentRemove" :file-list="fileListExp" >
            <template #trigger><el-button size="small" type="primary">选择表格</el-button></template>
            <el-button style="margin-left:10px" size="small" type="info" @click="checkExperiment">检查表格</el-button>
            <el-button style="margin-left:10px" size="small" type="success" @click="uploadExperiment">确认上传</el-button>
            <template #tip><div class="el-upload__tip">只能上传xls,xlsx格式的excel文件</div></template>
          </el-upload>
          </el-col>
          <el-col :span="7" style="text-align:center">
            <el-button size="small" type="warning" @click="DownloadExperimentExcel">下载表格</el-button>
          </el-col>
          <el-col :span="7" style="text-align:center">
            <el-button size="small" type="danger" @click="DownloadExperimentModel">下载模板</el-button>
          </el-col>
          </el-row>
        </div>
        <!-- 在线查看、编辑excel -->
        <div class="excelData" style="margin-bottom:12px;" v-show="this.excelTableExp">
          <el-table :data="excelDataExp" border stripe style="height:300px;width:100%" max-height="300px">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="项目编号" label="项目编号"></el-table-column>
            <el-table-column prop="项目名称" label="项目" min-width="150px"></el-table-column>
            <el-table-column prop="试验名称" label="试验名称"></el-table-column>
            <el-table-column prop="公式或固定值" label="公式或固定值"></el-table-column>
            <el-table-column prop="实际检测数量" label="实际检测数量"></el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 资料表 -->
      <div v-if="arr.indexOf('document') > -1">
        <div class="excel">
          <span class="title">资料表</span>
          <el-row>
          <el-col :span="10">
          <el-upload ref="uploadDocument" accept=".xls, .xlsx" action :limit="1" :auto-upload="false" 
            :on-change="DocumentChange" :on-exceed="OnExceed" :on-remove="DocumentRemove" :file-list="fileListDoc" >
            <template #trigger><el-button size="small" type="primary">选择表格</el-button></template>
            <el-button style="margin-left:10px" size="small" type="info" @click="checkDocument">检查表格</el-button>
            <el-button style="margin-left:10px" size="small" type="success" @click="UploadDocument">确认上传</el-button>
            <template #tip><div class="el-upload__tip">只能上传xls,xlsx格式的excel文件</div></template>
          </el-upload>
          </el-col>
          <el-col :span="7" style="text-align:center">
            <el-button size="small" type="warning" @click="DownloadDocumentExcel">下载表格</el-button>
          </el-col>
          <el-col :span="7" style="text-align:center">
            <el-button size="small" type="danger" @click="DownloadDocumentModel">下载模板</el-button>
          </el-col>
          </el-row>
        </div>
        <!-- 在线查看、编辑excel -->
        <div class="excelData" style="margin-bottom:12px;" v-show="this.excelTableDoc">
          <el-table :data="excelDataDoc" border stripe style="height:300px;width:100%" max-height="300px">
            <el-table-column prop="序号" label="序号"></el-table-column>
            <el-table-column prop="册数" label="册数" min-width="150px"></el-table-column>
            <el-table-column prop="文件材料名称" label="文件材料名称"></el-table-column>
            <el-table-column prop="编制完成" label="编制完成"></el-table-column>
            <el-table-column prop="监理已签认" label="监理已签认"></el-table-column>
            <el-table-column prop="设计已签认" label="设计已签认"></el-table-column>
            <el-table-column prop="建设单位已签认" label="建设单位已签认"></el-table-column>
            <el-table-column prop="已移交档案馆" label="已移交档案馆"></el-table-column>
          </el-table>
        </div>
      </div>
  
    </el-card>
  </div>
</template>

<script>
import XLSX from "xlsx";
import { resolve } from "url";
export default {
  data() {
    return {
      file: "",
      fileListBase: [],
      fileJsonBase: [],
      excelDataBase: [],
      excelTableBase: false,

      fileListExp: [],
      fileJsonExp: [],
      excelDataExp: [],
      excelTableExp: false,

      fileListPro: [],
      fileJsonPro: [],
      excelDataPro: [],
      excelTablePro: false,

      fileListDoc: [],
      fileJsonDoc: [],
      excelDataDoc: [],
      excelTableDoc: false,

      arr:['document','experiment','process','baseInventory'],
    };
  },
  mounted(){
    // this.arr = window.sessionStorage.getItem('permisson')     
  },
  methods: {
    OnExceed(files, fileList) { this.$message.warning("只能选择1个文件"); },
    checkExcelFormat(file,fileList){
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024;
      if (extension !== "xlsx" && extension !== "xls") {
        this.$message.warning("只能上传后缀是.xls或.xlsx的文件");
        return false;
      }
      if (size > 10) {
        this.$message.warning("文件大小不得超过10M");
        return false;
      }
      return true;
    },
    readExcel(file) {
      let reader = new FileReader();
      let result = [];
      reader.onload = function(e) {
        let wb = XLSX.read(e.target.result, {
          type: "binary",
          cellDates: true
        });
        // 给defval赋值为空的字符串
        const sheetJSONOpts = { defval: "" };
        wb.SheetNames.forEach(sheetName => {
          result.push({
            sheetName: sheetName,
            sheet: XLSX.utils.sheet_to_json(wb.Sheets[sheetName], sheetJSONOpts)
          });
        });
      };
      reader.readAsBinaryString(file.raw);
      return result;
    },
    DownloadExcel(url){
      let xhr = new XMLHttpRequest()
      xhr.open('get',url)
      xhr.setRequestHeader('Content-Type','application/json;charset=UTF-8')
      xhr.setRequestHeader("satoken",window.sessionStorage.getItem('satoken'))
      xhr.responseType = 'blob'
      xhr.send("")
       xhr.onreadystatechange = function(){
        if(xhr.readyState ===4 && xhr.status === 200){
          const blob = new Blob([xhr.response])
          let url = window.URL.createObjectURL(blob)
          //创建一个a标签元素，设置下载属性，点击下载，最后移除该元素
          let link = document.createElement('a')
          link.href = url
          link.style.display = 'none'
          //取出下载文件名
          const contentDisposition= xhr.getResponseHeader('Content-Disposition')
          const downloadFileName = decodeURIComponent(contentDisposition.split('=')[1], "GBK");
          link.setAttribute('download',downloadFileName)
          link.click()
          window.URL.revokeObjectURL(url)
        }
      }
    },

// 基础清单表
    BaseInventoryChange(file, fileList) {
      if(!this.checkExcelFormat(file,fileList)){
        this.fileListBase = [];
        this.file = "";
        return false;
      }
      this.file = file.raw;
      this.fileListBase = fileList;
      this.fileJsonBase = this.readExcel(file);
    },
    checkBaseInventory(){
      if(this.file != ""){
        this.excelDataBase = this.fileJsonBase[0].sheet;
        this.excelTableBase = true;
      }else{
        this.$message.warning("请先选择文件")
      }
    },
    BaseInventoryRemove(file,fileList){
      this.fileListBase = [];
      this.excelTableBase = false;
      this.excelDataBase = [];
    },
    async uploadBaseInventory() {
      if(this.file != ""){
        this.$refs.uploadBaseInventory.clearFiles()
        let form = new FormData();
        form.append("file", this.file);
        let url = "";                                       //-----------------------
        let config = {
          headers: { "Content-Type": "multipart/form-data" }
        };
        const { data: res } = await this.$http.post(url,form,config);
        if(res.code != 200){ this.$message.error(res.msg); }
        this.$message.success(res.msg);
        this.file = "";
        this.excelTableBase = false;
      }else{
        this.$message.warning("请先选择文件")
      }
    },
    DownloadBaseInventoryModel(){
      let url = this.$http.defaults.baseURL + "";           //-----------------
      this.DownloadExcel(url);
    },
    DownloadBaseInventoryExcel(){
      let url = this.$http.defaults.baseURL + "";           //-------------------
      this.DownloadExcel(url);
    },

    // 进度表
    ProcessChange(file, fileList) {
      if(!this.checkExcelFormat(file,fileList)){
        this.fileListPro = [];
        this.file = "";
        return false;
      }
      this.file = file.raw;
      this.fileListPro = fileList;
      this.fileJsonPro = this.readExcel(file);
    },
    checkProcess(){
      if(this.file != ""){
        this.excelDataPro = this.fileJsonPro[0].sheet;
        this.excelTablePro = true;
      }else{
        this.$message.warning("请先选择文件")
      }
    },
    ProcessRemove(file,fileList){
      this.fileListPro = [];
      this.excelTablePro = false;
      this.excelDataPro = [];
    },
    ProcessChange(file, fileList) {
      if(!this.checkExcelFormat(file,fileList)){
        this.fileListPro = [];
        this.file = "";
        return false;
      }
      this.file = file.raw;
      this.fileListPro = fileList;
      this.fileJsonPro = this.readExcel(file);
    },
    checkProcess(){
      if(this.file != ""){
        this.excelDataPro = this.fileJsonPro[0].sheet;
        this.excelTablePro = true;
      }else{
        this.$message.warning("请先选择文件")
      }
    },
    ProcessRemove(file,fileList){
      this.fileListPro = [];
      this.excelTablePro = false;
      this.excelDataPro = [];
    },
    async uploadProcess() {
      if(this.file != ""){
        this.$refs.uploadProcess.clearFiles()
        let form = new FormData();
        form.append("file", this.file);
        let url = "";                                     //------------
        let config = {
          headers: { "Content-Type": "multipart/form-data" }
        };
        const { data: res } = await this.$http.post(url,form,config);
        if(res.code != 200){ this.$message.error(res.msg); }
        this.$message.success(res.msg);
        this.file = "";
        this.excelTablePro = false;
      }else{
        this.$message.warning("请先选择文件")
      }
    },
    DownloadProcessModel(){
      let url = this.$http.defaults.baseURL + "";       //---------------
      this.DownloadExcel(url);
    },
    DownloadProcessExcel(){
      let url = this.$http.defaults.baseURL + "";       //---------------
      this.DownloadExcel(url);
    },

    // 试验检测表
    ExperimentChange(file, fileList) {
      if(!this.checkExcelFormat(file,fileList)){
        this.fileListExp = [];
        this.file = "";
        return false;
      }
      this.file = file.raw;
      this.fileListExp = fileList;
      this.fileJsonExp = this.readExcel(file);
    },
    checkExperiment(){
      if(this.file != ""){
        this.excelDataExp = this.fileJsonExp[0].sheet;
        this.excelTableExp = true;
      }else{
        this.$message.warning("请先选择文件")
      }
    },
    ExperimentRemove(file,fileList){
      this.fileListExp = [];
      this.excelTableExp = false;
      this.excelDataExp = [];
    },
    async uploadExperiment() {
      if(this.file != ""){
        this.$refs.uploadExperiment.clearFiles()
        let form = new FormData();
        form.append("file", this.file);
        let url = "experimenter/uploadExperimentExcel";
        let config = {
          headers: { "Content-Type": "multipart/form-data" }
        };
        const { data: res } = await this.$http.post(url,form,config);
        if(res.code != 200){ this.$message.error(res.msg); }
        this.$message.success(res.msg);
        this.file = "";
        this.excelTableExp = false;
      }else{
        this.$message.warning("请先选择文件")
      }
    },
    DownloadExperimentModel(){
      let url = this.$http.defaults.baseURL + "experimenter/exportExperimentExcelModel";
      this.DownloadExcel(url);
    },
    DownloadExperimentExcel(){
      let url = this.$http.defaults.baseURL + "experimenter/exportExperimentExcel";
      this.DownloadExcel(url);
    },

    //资料表
    DocumentChange(file, fileList) {
      if(!this.checkExcelFormat(file,fileList)){
        this.fileListDoc = [];
        this.file = "";
        return false;
      }
      this.file = file.raw;
      this.fileListDoc = fileList;
      this.fileJsonDoc = this.readExcel(file);
    },
    checkDocument(){
      if(this.file != ""){
        this.excelDataDoc = this.fileJsonDoc[0].sheet;
        this.excelTableDoc = true;
      }else{
        this.$message.warning("请先选择文件")
      }
    },
    DocumentRemove(file,fileList){
      this.fileListDoc = [];
      this.excelTableDoc = false;
      this.excelDataDoc = [];
    },
    async UploadDocument() {
      if(this.file != ""){
        this.$refs.uploadDocument.clearFiles()
        let form = new FormData();
        form.append("file", this.file);
        let url = "documenter/uploadDocumentExcel";
        let config = {
          headers: { "Content-Type": "multipart/form-data" }
        };
        const { data: res } = await this.$http.post(url,form,config);
        if(res.code != 200){ this.$message.error(res.msg); }
        this.$message.success(res.msg);
        this.file = "";
        this.excelTableDoc = false;
      }else{
        this.$message.warning("请先选择文件")
      }
    },
    DownloadDocumentModel(){
      let url = this.$http.defaults.baseURL + "documenter/exportDocumentExcelModel";
      this.DownloadExcel(url);
    },
    DownloadDocumentExcel(){
      let url = this.$http.defaults.baseURL + "documenter/exportDocumentExcel";
      this.DownloadExcel(url);
    },
    

    // 甩项工程量：比清单基础表base多了一个甩项工程量
      //项目编号:fixedMark 项目名称 项目简称 计量单位 综合单价 合价 清单工程量 一级分类 二级分类 甩项工程量:dropQuantity
    // 进度表:progress 
      // 日期:day 日期和时间:timestamp 起桩号:beginPile 止桩号:endPile 已完成工程量:completeQuantity 审核状态:progressPassStatus 项目编号:fixed_mark   
    // 施工计划表: schedule
      // 项目编号:fixed_mark 项目名称 计量单位 计划开始时间:scheduleBeginDay 计划结束时间:scheduleEndDay 年:scheduleYear 月:scheduleMonth 该月计划完成工程量scheduleQuantity 已完成工程量completedQuantity 剩余工程量:surplusQuantity
    // 试验检测表: experiment
      //项目编号:fixedMark 项目名称 试验名称:fullName 公式或固定值:formula 实际检测数量:numberSubmitByUser 审核状态:experimentPassStatus
    //基础清单表
      // 'id','fixedMark','fullName','simpleName','description','meteredUnit','univalent',
      // 'inventoryQuantity','inventoryTotality','mainProjectType','subProjectType',
       
    }
};
</script>

<style lang="less" scoped>
.excel{
  width: 100%;
  height: 120px;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
  .title{
    font-size: 14px;
    color:#666;
    display: block;
    margin-bottom: 10px;
  }
  
}
</style>